import React, { useState } from 'react';
import { Switch, Table,Input,Select,Space,DatePicker  } from 'antd';
import type { TableColumnsType } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';
interface DataType {
  // === 单据头信息 ===
  /** 销售出库单编号 */
  outboundOrderCode: string;
  /** 销售订单名称 */
  salesOrderName: string;
  /** 销售订单编号 */
  salesOrderCode: string;
  
  // === 客户信息 ===
  /** 客户名称 */
  customerName: string;
  /** 客户编码 */
  customerCode: string;
  /** 客户联系人姓名 */
  contactName: string;
  /** 客户联系人手机 */
  contactPhone: string;
  
  // === 销售信息 ===
  /** 销售负责人 */
  salesOwner: string;
  /** 销售归属部门 */
  salesDepartment: string;
  /** 产品出库标签（如：紧急、普通） */
  outboundLabel?: string;
  /** 出库仓库名称 */
  warehouseName: string;

  // === 产品明细 ===
  products: {
    /** 产品名称 */
    productName: string;
    /** 产品编码 */
    productCode: string;
    /** 品牌 */
    brand?: string;
    /** 规格型号 */
    model?: string;
    /** 单位（如：件、箱） */
    unit: string;
    /** 销售数量（订单需求数量） */
    salesQuantity: number;
    /** 待出库数量（未出库部分） */
    pendingOutboundQuantity: number;
    /** 本次出库数量（实际出库数） */
    outboundQuantity: number;
    /** 当前可用库存 */
    availableStock: number;
    /** 库存冻结数量 */
    frozenStock?: number;
    
    // === 产品价格信息 ===
    /** 实际售价（含税）/元 */
    actualPriceWithTax: number;
    /** 实际售价（不含税）/元 */
    actualPriceWithoutTax?: number;
    /** 成本单价/元 */
    costPrice: number;
    /** 产品售价合计（含税）/元 */
    totalPriceWithTax: number;
    /** 产品成本合计/元 */
    totalCost: number;
  }[];

  // === 财务汇总 ===
  /** 出库产品总数（所有产品数量总和） */
  totalOutboundQuantity: number;
  /** 出库产品售价总额（含税）/元 */
  totalSalesAmountWithTax: number;
  /** 出库产品成本总额/元 */
  totalCostAmount: number;
  /** 出库数量校验结果 */
  quantityCheckResult?: "valid" | "invalid";
  /** 库存数量校验结果 */
  stockCheckResult?: "valid" | "invalid";

  // === 出库流程 ===
  /** 计划出库数量（计算值） */
  plannedOutboundQuantity?: number;
  /** 预计出库时间 */
  estimatedOutboundTime?: string | Date;
  /** 实际出库时间 */
  actualOutboundTime?: string | Date;
  /** 库管归属部门 */
  warehouseDepartment: string;
  /** 客户收货确认 */
  customerConfirmation?: boolean;
  /** 收货确认时间 */
  confirmationTime?: string | Date;
  /** 提交人 */
  submitter: string;
  /** 提交时间 */
  submitTime: string | Date;
  /** 更新时间 */
  updateTime?: string | Date;
  /** 出库拍照（照片URL或Base64） */
  outboundPhoto?: string;
  
  // === 状态标志 ===
  /** 产品出库确认状态 */
  isConfirmed?: boolean;
}

const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
const columns: TableColumnsType<DataType> = [
  {
    title: '',
    
    dataIndex: '',
    key: 0,

  },
  {
    title: '销售订单名称',
   
    dataIndex: 'outboundOrderCode',
    key: 1,
   
  },
  {
    title: '销售订单编号',
 dataIndex: 'salesOrderCode',
    key: 2
   
  },
  {
    title: '客户名称',
   
    dataIndex: 'customerName',

    
   
  },
   {
    title: '客户编码',
   
    dataIndex: 'customerCode',

    
   
  },
   {
    title: '客户联系人姓名',
   
    dataIndex: 'contactName',

    
   
  },
   {
    title: '客户联系人手机',
   
    dataIndex: 'contactPhone',

    
   
  },
   {
    title: '销售负责人',
   
    dataIndex: 'salesOwner',

    
   
  },
   {
    title: '销售归属部门',
   
    dataIndex: 'salesDepartment',

    
   
  },
   {
    title: '产品出库标签',
   
    dataIndex: 'outboundLabel',

    
   
  },
   {
    title: '出库仓库',
   
    dataIndex: 'warehouseName',

    
   
  },
   {
    title: '产品名称',
   
    dataIndex: 'productName',

    
   
  },
   {
    title: '产品编码',
   
    dataIndex: 'productCode',

    
   
  },
   {
    title: '品牌',
   
    dataIndex: ' brand',

    
   
  },
   {
    title: '规格型号',
   
    dataIndex: 'model',

    
   
  },
   {
    title: '单位',
   
    dataIndex: 'unit',

    
   
  },
   {
    title: '销售数量',
   
    dataIndex: 'salesQuantity',

    
   
  },
   {
    title: '待出库数量',
   
    dataIndex: 'pendingOutboundQuantity',

    
   
  },
   {
    title: '本次出库数量',
   
    dataIndex: 'outboundQuantity',

    
   
  },
   {
    title: '当前可用库存',
   
    dataIndex: 'availableStock',

    
   
  },
   {
    title: '库存冻结数量',
   
    dataIndex: 'frozenStock',

    
   
  },
   {
    title: '实际售价（含税）/元',
   
    dataIndex: 'actualPriceWithTax',

    
   
  },
   {
    title: '实际售价（不含税）/元',
   
    dataIndex: 'actualPriceWithoutTax',

    
   
  },
   {
    title: '成本单价/元 ',
   
    dataIndex: 'costPrice',

   
   
  },
   {
    title: ' 产品售价合计（含税）/元',
   
    dataIndex: 'totalPriceWithTax',

    
   
  },
   {
    title: '产品成本合计/元',
   
    dataIndex: 'totalCost',

   
   
  },
   {
    title: '出库产品总数（所有产品数量总和）',
   
    dataIndex: 'totalOutboundQuantity',

   
   
  },
   {
    title: '出库产品售价总额（含税）/元 ',
   
    dataIndex: 'totalSalesAmountWithTax',

   
   
  },
   {
    title: '出库产品成本总额/元',
   
    dataIndex: 'totalCostAmount',
  
   
  },
   {
    title: '出库数量校验结果',
   
    dataIndex: 'quantityCheckResult',

   
   
  },
  {
    title: '库存数量校验结果',
   
    dataIndex: 'stockCheckResult',

   
   
  },
   {
    title: '计划出库数量',
   
    dataIndex: 'plannedOutboundQuantity',

   
   
  },
   {
    title: '预计出库时间',
   
    dataIndex: 'estimatedOutboundTime',

   
   
  },
   {
    title: '实际出库时间',
   
    dataIndex: 'actualOutboundTime',

   
   
  },
   {
    title: '库管归属部门',
   
    dataIndex: 'warehouseDepartment',

   
   
  },
   {
    title: '客户收货确认',
   
    dataIndex: 'customerConfirmation',

   
   
  },
   {
    title: '收货确认时间',
   
    dataIndex: 'confirmationTime',

   
   
  },
   {
    title: '提交人',
   
    dataIndex: 'submitter',

   
   
  },
   {
    title: '提交时间',
   
    dataIndex: 'submitTime',

   
   
  },
   {
    title: '更新时间',
   
    dataIndex: 'updateTime',

   
   
  },
   {
    title: '出库拍照',
   
    dataIndex: 'outboundPhoto',

   
   
  },
   {
    title: ' 产品出库确认状态',
   
    dataIndex: 'isConfirmed',

   
   
  },
];

const dataSource: DataType[] = [
 {
  // === 单据头信息 ===
  outboundOrderCode: "OUT-20230715-001",
  salesOrderName: "2023年夏季订单",
  salesOrderCode: "SO-20230620-015",
  
  // === 客户信息 ===
  customerName: "XX科技有限公司",
  customerCode: "CUST-10086",
  contactName: "张经理",
  contactPhone: "13800138000",
  
  // === 销售信息 ===
  salesOwner: "李销售",
  salesDepartment: "华东销售部",
  outboundLabel: "紧急",
  warehouseName: "上海浦东仓库",

  // === 产品明细 ===
  products: [
    {
      productName: "笔记本电脑",
      productCode: "PROD-1001",
      brand: "华为",
      model: "MateBook X Pro 2023",
      unit: "台",
      salesQuantity: 5,
      pendingOutboundQuantity: 0,
      outboundQuantity: 5,
      availableStock: 20,
      frozenStock: 5,
      actualPriceWithTax: 8999,
      actualPriceWithoutTax: 7963.72,
      costPrice: 6500,
      totalPriceWithTax: 44995,
      totalCost: 32500
    },
    {
      productName: "无线鼠标",
      productCode: "PROD-2005",
      brand: "罗技",
      model: "MX Master 3",
      unit: "个",
      salesQuantity: 10,
      pendingOutboundQuantity: 0,
      outboundQuantity: 10,
      availableStock: 50,
      frozenStock: 10,
      actualPriceWithTax: 599,
      actualPriceWithoutTax: 530.09,
      costPrice: 400,
      totalPriceWithTax: 5990,
      totalCost: 4000
    }
  ],

  // === 财务汇总 ===
  totalOutboundQuantity: 15,
  totalSalesAmountWithTax: 50985,
  totalCostAmount: 36500,
  quantityCheckResult: "valid",
  stockCheckResult: "valid",

  // === 出库流程 ===
  plannedOutboundQuantity: 15,
  estimatedOutboundTime: "2023-07-15T09:00:00",
  actualOutboundTime: "2023-07-15T09:30:00",
  warehouseDepartment: "仓储一部",
  customerConfirmation: true,
  confirmationTime: "2023-07-15T14:00:00",
  submitter: "王库管",
  submitTime: "2023-07-15T10:00:00",
  updateTime: "2023-07-15T14:30:00",
  outboundPhoto: "https://example.com/photos/outbound-001.jpg",
  
  // === 状态标志 ===
  isConfirmed: true
}
 
 
];

const App: React.FC = () => {
 
  return (
    <Table<DataType>
         style={{maxWidth:"100%",overflow:"auto"}}
      columns={columns}
      dataSource={dataSource}
         scroll={{ x: 'max-content' }}
    />
  );
};

export default App;